<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>碎片化无缝轮播</title>
    <script src="tween.js"></script>
    <script src="animationRunning.js"></script>
    <style>
        body, div, ul, li, span {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style-type: none;
        }

        #wrap {
            position: relative;
            margin: 100px auto;
            width: 1000px;
            height: 560px;
            border: 1px solid;
            vertical-align: middle;
            font-size: 0;
        }

        .banner-pic {
            position: relative;
            overflow: hidden;
            width: 1000%;
        }

        .banner-pic li {
            position: relative;
            float: left;
        }

        .btn {
            position: absolute;
            top: 0;
            bottom: 25px;
            width: 100%;
            height: 0;
            margin: auto;
            font-size: 30px;
            font-weight: 700;
            color: rgba(0, 0, 0, .5);
        }

        .btn span {
            display: inline-block;
            float: left;
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, .2);
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }

        .btn span + span {
            float: right;
        }

        .btn span:hover,
        .btn span.on {
            background-color: rgba(255, 255, 255, .4);
        }

        .poit {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }

        .poit li {
            display: inline-block;
            margin: 10px;
            width: 20px;
            height: 20px;
            background-color: rgba(250, 95, 50, 1);
            border-radius: 50%;
        }

        .poit li:hover,
        .poit li.on {
            background-color: rgba(210, 205, 10, 1);
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="banner">
        <ul class="banner-pic"></ul>
    </div>
    <div class="btn">
        <span class="btnBack">&lt;</span>
        <span class="btnNext">&gt;</span>
    </div>
    <ul class="poit">

    </ul>
</div>
</body>
<script>
	var oBanPic = document.getElementsByClassName('banner-pic')[0],
		oBanPicLi = oBanPic.getElementsByTagName('li'),
		oBtn = document.getElementsByClassName('btn')[0],
		oPoit = document.getElementsByClassName('poit')[0],
		oPli = oPoit.getElementsByTagName('li'),
		oBack = oBtn.getElementsByClassName('btnBack')[0],
		oNext = oBtn.getElementsByClassName('btnNext')[0];

	//定义属性
	var images = ['images/timg0.jpg', 'images/timg2.jpg', 'images/timg3.jpg',
			'images/timg4.jpg', 'images/timg5.jpg', 'images/timg6.jpg'
		],
		index = 0,
		_status = true,
		imgLen = images.length,//图片的数量
		attrVal = {
			width: 1000,
			height: 560
		},
		grid = {
			list: 10,
			colum: 10
		},
		comNum = 0,//完成，完成100个时结束。
		allNum = grid.list * grid.colum,//总数
		changeVal = {
			width: attrVal.width / grid.list,
			height: attrVal.height / grid.colum,
		};
	//初始化
	oBanPic.style.width = attrVal.width + 'px';
	oBanPic.style.height = attrVal.height + 'px';
	//创建下面的小点
	for (var i = 0, iL = imgLen; i < iL; i++) {
		var oPoitLi = document.createElement('li');
		oPoitLi.onclick = (function (i) {
			return function () {
				if (comNum === allNum || _status) {
					comNum = 0;
					_status = false;
					oPli[index].className = '';
					index = i;
					oPli[index].className = 'on';
					run();
				}
			};
		})(i);
		oPoit.appendChild(oPoitLi);
	}
	oPli[0].className = 'on';
	//创建li标签,i是创建行，j是列。
	for (var i = 0, iL = grid.colum; i < iL; i++) {
		for (var j = 0, jL = grid.list; j < jL; j++) {
			var oPicLi = document.createElement('li');
			//设置每个小块的宽高
			oPicLi.style.width = changeVal.width + 'px';
			oPicLi.style.height = changeVal.height + 'px';

			//设置每个小块的位置
			oPicLi.style.backgroundPositionX = -j * changeVal.width + 'px';
			oPicLi.style.backgroundPositionY = -i * changeVal.height + 'px';

			//设置背景大小
			oPicLi.style.backgroundSize = attrVal.width + 'px ' + attrVal.height + 'px';
			oPicLi.style.backgroundImage = 'url(' + images[index] + ')';
			oBanPic.appendChild(oPicLi);
		}
	}

	oNext.onclick = function () {
		if (comNum === allNum || _status) {
			comNum = 0;
			_status = false;
			oPli[index].className = '';
			index++;
			index %= imgLen;
			oPli[index].className = 'on';
			run();
		}
	}
	oBack.onclick = function () {
		if (comNum === allNum || _status) {
			comNum = 0;
			_status = false;
			oPli[index].className = '';
			index--;
			if (index < 0) {
				index = imgLen - 1;
			}
			oPli[index].className = 'on';
			run();
		}
	}


	function run() {
		for (var i = 0, iL = oBanPicLi.length; i < iL; i++) {
			animationRunning(oBanPicLi[i], {
				left: randomNum(-attrVal.width, attrVal.width),
				top: randomNum(-attrVal.height, attrVal.height),
				opacity: 0,
				transform: {
					start: function () {
						var rotateXChange = randomNum(0, 720);
						var rotateYChange = randomNum(0, 720);
						return {
							rotateX: {
								start: 0,
								change: rotateXChange
							},
							rotateY: {
								start: 0,
								change: rotateYChange
							}
						}
					},
					up: function (attr, key, time, animationTime) {
						attrValue = '';
						for (var attrKey in attr) {
							var _value = getStep(time, attr[attrKey].start, attr[attrKey].change, animationTime);
							attrValue += attrKey + '(' + _value + 'deg)';  //这里应该是开始加上变化的角度
							this.style[key] = attrValue;
						}
					}
				}
			}, {
				duration: 1000
			}, function () {
				this.style.backgroundImage = 'url(' + images[index] + ')';
				animationRunning(this, {
					left: 0,
					top: 0,
					opacity: 1,
					transform: {
						start: function () {
							var rotateXChange = randomNum(0, 720);
							var rotateYChange = randomNum(0, 720);
							return {
								rotateX: {
									start: rotateXChange,
									change: -rotateXChange
								},
								rotateY: {
									start: rotateYChange,
									change: -rotateYChange
								}
							}
						},
						up: function (attr, key, time, animationTime) {
							attrValue = '';
							for (var attrKey in attr) {
								var _value = getStep(time, attr[attrKey].start, attr[attrKey].change, animationTime);
								attrValue += attrKey + '(' + _value + 'deg)';  //这里应该是开始加上变化的角度
								this.style[key] = attrValue;
							}
						}
					}
				}, {
					duration: 1000
				}, function () {
					comNum++;
				});
			});
		}
	}

	//返回n~m的数
	function randomNum(n, m) {
		if (n > m) {
			n = n + m;
			m = n - m;
			n = n - m;
		}
		return Math.floor(Math.random() * (m - n + 1)) + n;
	}
</script>
</html>